<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      width: auto;
      display: flex;
    }

    li {
      width: 100px;
      height: 50px;
      background-color: aqua;
      margin-right: 10px;
      display: inline-flex;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <ul class="myul">
    <li class="myli">
      <div style="background-color: red;" onmousedown="handleMouseDown(event)">11</div>
    </li>
    <li class="myli">2</li>
    <li class="myli">3</li>
    <li class="myli">4</li>
    <li class="myli">5</li>
    <li class="myli">6</li>
  </ul>
</body>
<script>
  function handleMouseDown(e) {
    console.log(e);
    e.preventDefault();
    e.stopPropagation();
   
  }
</script>
<script type="module">
  (async function main() {
    // const sortable = await import("https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.mjs");
    // const sortable = await import("https://esm.sh/@shopify/draggable@1.1.3/build/esm/Sortable/Sortable.mjs");
    const sortable = await import("https://esm.sh/@shopify/draggable@1.1.3/build/esm/Swappable/Swappable.mjs");
    setTimeout(() => {
      const containerSelector = '.myul';
      const containers = document.querySelector(containerSelector);
      // debugger;
      new sortable.default(containers, {
        draggable: '.myli',
        // plugins: [splugins.SortAnimation],
        // swapAnimation: {
        //   duration: 1000,
        //   easingFunction: 'ease-in-out',
        // },
        mirror: {
          // appendTo: containerSelector,
          // constrainDimensions: true,
          // yAxis: false,
        },
      });


    }, 1000);
  })()

</script>

</html>